<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
* {
    margin: 0;
    padding: 0;
}
html, body, #part1, #main {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.hidden {
    display: none;
}

#part1 {
    position: absolute;
}
#part1 .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
}
#part1 div {
    position: absolute;
    top: 6%;
    width: 95%;
    left: 4%;
}
#part1 div > img {
    width: 100%;
}
#part1 div a {
    width: 30%;
    left: 32.5%;
    bottom: 10%;
    position: absolute;
}
#part1 div a img {
    width: 100%;
}

#main > img {
    display: none;
}

#main canvas {
    width: 100%;
    height: 100%;
}

#main > div {
    position: absolute;
    top: 0;
    padding: 10px 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

#main > div img {
    height: 8%;
    margin-left: 4%;
    vertical-align: middle;
}
#main > div img:nth-of-type(2) {
    margin-left: 8%;
}
#main > div span {
    display: inline-block;
    width: 10%;
    font-size: 18px;
    margin-left: -15%;
    font-weight: bold;
    vertical-align: middle;
    text-align: right;
}
#main > div span:nth-of-type(2) {
    margin-left: -15%;
}

#res {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
}

#res > img:nth-of-type(1) {
    width: 80%;
    left: 10%;
    top: 10%;
    position: absolute;
}

#res img:nth-of-type(1) ~ div {
    display: block;
    position: absolute;
    width: 80%;
    height: 8%;
    left: 10%;
    bottom: 20%;
    text-align: center;
}
#res img:nth-of-type(1) ~ div img {
    height: 100%;
}
#res img:nth-of-type(1) ~ div a:last-child img {
    margin-left: 10px;
}

</style>
<title>标题</title>
</head>
<body>
<div id="part1" class="hidden">
    <img class="bg" src="img/14.png" />
    <div>
        <img src="img/17_03.png" />
        <a href="#" onclick="javascript:start()"><img src="img/16_03.png" /></a>
    </div>
</div>

<div id="main">
    <img id="ds1" src="img/13_05.png" />
    <img id="ds2" src="img/13_03.png" />
    <img id="layer6" src="img/layer6.png" />
    <img id="layer5" src="img/layer5.png" />
    <img id="layer4" src="img/layer4.png" />
    <img id="layer3" src="img/layer3.png" />
    <img id="layer2" src="img/layer2.png" />
    <img id="layer1" src="img/layer1.png" />
    <img id="layer0" src="img/layer0.png" />
    <canvas id="canvas"></canvas>
    <div>
        <a href="javascript:back()"><img src="img/5_03.png" /></a>
        <img src="img/5_05.png" />
        <span id="time">30</span>
        <img src="img/5_07.png" />
        <span id="score">0</span>
    </div>
</div>

<div id="res" class="hidden">
    <img src="img/2_03.png" />
    <div>
    <a href="#"><img src="img/1_03.png" /></a>
    <a href="#" onclick="javascript:back()"><img src="img/1_05.png" /></a>
    </div>
</div>

<script>
    window.oncontextmenu = function(e) {
        e.preventDefault();
    }

    var layer0 = document.getElementById("layer0");
    var layer1 = document.getElementById("layer1");
    var layer2 = document.getElementById("layer2");
    var layer3 = document.getElementById("layer3");
    var layer4 = document.getElementById("layer4");
    var layer5 = document.getElementById("layer5");
    var layer6 = document.getElementById("layer6");
    var ds1 = document.getElementById("ds1");
    var ds2 = document.getElementById("ds2");

    var time_span = document.getElementById("time");
    var score_span = document.getElementById("score");

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img_x, img_y, img_w, img_h, ds_w, ds_h, ratio;

    var minY, maxY;

    var succ_score = 35;

    var game = {};

    function start() {
        canvas.width = window.screen.width;
        canvas.height = window.screen.height;
    
        ratio = canvas.width / 640;
        var ratio2 = canvas.height / 1136;
        ratio = Math.max(ratio, ratio2);

        img_w = 640 * ratio;
        img_h = 1136 * ratio;
        img_x = (canvas.width - img_w) / 2;
        img_y = (canvas.height - img_h) / 2;
        ds_w = 107 * ratio;
        ds_h = 150 * ratio;

        minY = [canvas.height * 0.54, canvas.height * 0.69, canvas.height * 0.84];
        maxY = [canvas.height * 0.65, canvas.height * 0.8, canvas.height * 0.95];

        document.getElementById("part1").className = 'hidden';
        document.getElementById("main").className = '';
        game = {
            time: 30,
            score: 0,
            status: new Array(9),
            timer: null,
            timer2: null,
            ani: null
        };
        for(var i = 0; i < 9; i++) {
            game.status[i] = {
                x: 0,
                y: 0,
                hit: false,
                stopDur: 0,
                dir: 0
            }
        }
        for(var i = 0; i < 9; i += 3) {
            game.status[i].x = canvas.width * 0.25;
        }
        for(var i = 1; i < 9; i += 3) {
            game.status[i].x = canvas.width * 0.5;
        }
        for(var i = 2; i < 9; i += 3) {
            game.status[i].x = canvas.width * 0.76;
        }
        for(var i = 0; i < 3; i++) {
            game.status[i].y = maxY[0];
        }
        for(var i = 3; i < 6; i++) {
            game.status[i].y = maxY[1];
        }
        for(var i = 6; i < 9; i++) {
            game.status[i].y = maxY[2];
        }
        game.ani = requestAnimationFrame(render);
        time_span.innerHTML = "0";
        score_span.innerHTML = "0";
        game.timer3 = setTimeout(function() {
            play();
        }, 1000);
    }

    function back() {
        location.href = 'index.html';
        document.getElementById("part1").className = '';
        document.getElementById("main").className = 'hidden';
        document.getElementById("res").className = 'hidden';
        if (game.timer) {
            clearInterval(game.timer);
        }
        if (game.timer2) {
            clearInterval(game.timer2);
        }
        if (game.timer3) {
            clearTimeout(game.timer3);
        }
        if (game.ani) {
            cancelAnimationFrame(game.ani);
        }
    }

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(layer6, img_x, img_y, img_w, img_h);

        draw(0);

        ctx.drawImage(layer5, img_x, img_y, img_w, img_h);
        ctx.drawImage(layer4, img_x, img_y, img_w, img_h);
        
        draw(1);
        
        ctx.drawImage(layer3, img_x, img_y, img_w, img_h);
        ctx.drawImage(layer2, img_x, img_y, img_w, img_h);
        
        draw(2);
        
        ctx.drawImage(layer1, img_x, img_y, img_w, img_h);
        ctx.drawImage(layer0, img_x, img_y, img_w, img_h);

        game.ani = requestAnimationFrame(render);
    }

    function draw(line) {
        for(var i = line * 3; i < (line + 1) * 3; i++) {
            var s = game.status[i];
            ctx.drawImage(s.hit ? ds2 : ds1, s.x - ds_w / 2, s.y - ds_h / 2, ds_w, ds_h);

            s.y += s.dir * 7;

            if (s.y <= minY[line]) {
                s.y = minY[line];
            } else if (s.y >= maxY[line]) {
                s.y = maxY[line];
            }

            if (s.hit) {
                if (s.stopDur < 10) {
                    s.stopDur++;
                } else {
                    s.dir = 1;
                    s.hit = false;
                    s.stopDur = 0;
                }
            }
        }
    }

    function play() {
        game.timer = setInterval(function() {
            show(random());
        }, 500);
        game.timer2 = setInterval(function() {
            game.time--;
            if (game.time <= 0) {
                clearInterval(game.timer2);
                clearInterval(game.timer);
                game.timer2 = null;
                game.timer = null;


                document.getElementById("res").className = '';
                if (game.score >= succ_score) {
                    document.querySelector('#res > img').src = 'img/2_03.png';
                } else {
                    document.querySelector('#res > img').src = 'img/3_03.png';
                }
            }
            time_span.innerHTML = game.time;
        }, 1000);
    }

    function show(idx) {
        game.status[idx].dir = -1;
        setTimeout(function() {
            hide(idx);
        }, 1500);
    }

    function hide(idx) {
        game.status[idx].dir = 1;
    }

    function hit(idx) {
        if (game.status[idx].y == minY[Math.floor(idx / 3)]) {
            game.status[idx].hit = true;
            game.status[idx].dir = 0;

            game.score++;
            score_span.innerHTML = game.score;
        }
    }

    function random() {
        return Math.floor(Math.random() * 9);
    }

    document.querySelector('#main > div').ontouchstart = function(e) {
        var x = e.touches[0].clientX / document.body.clientWidth + 0.075;
        var y = (e.touches[0].clientY + 0.15 * document.body.clientWidth / 107 * 75) / document.body.clientHeight;
        var i = -1;

        if (y > 0.57 && y < 0.64) {
            i = 0;
        } else if (y > 0.72 && y < 0.79) {
            i = 3;
        } else if (y > 0.87 && y < 0.94) {
            i = 6;
        }
        
        if (i > -1) {
            if (x > 0.25 && x < 0.4) {
                i += 0;
            } else if (x > 0.5 && x < 0.65) {
                i += 1;
            } else if (x > 0.76 && x < 0.91) {
                i += 2;
            } else {
                i = 0;
            }
        }

        if (i > -1) {
            hit(i);
        }
    }

    window.onload = function() {
        start();
    }
</script>
</body>
</html>
